<template>
<div>
  <avue-ueditor v-model="text"
              v-bind="options"></avue-ueditor>
<span class="avue-ueditor__code">{{text}}</span>
</div>
</template>
<script>
// 富文本编辑器  https://www.cnblogs.com/niceplayerzzz/p/16335295.html
import avueUeditor from 'avue-plugin-ueditor'
export default {
  component:{
    avueUeditor
  },
  data() {
    return {
      text: '<h1 class="ql-align-center" style="text-align: center;"><a href="https://avuejs.com/doc/plugins/ueditor-plugins" target="_blank" style="font-weight: bold; color: rgb(194, 79, 74);">欢迎使用Avue富文本编辑器</a></h1><p class="ql-align-center" style="text-align: center;"><span style="font-weight: bold; color: rgb(194, 79, 74);"><img src="https://avuejs.com/images/logo.png" height="200" width="200"></span></p>',
      options: {
        //普通上传地址
        action: "https://api.avuejs.com/imgupload",
        customConfig: {},//wangEditor编辑的配置
        //是否启用oss(qiniu/ali)
        oss:'',
        headers:{},
        data:{},
        propsHttp: {
          home:'',
          url:'url',
          res: 'data'
        },
        //七牛云oss配置
        qiniu: {
          AK: "",
          SK: "",
          scope: "",
          url: "",
          deadline: 1
        },
        //阿里云oss配置
        ali: {
          region: "",
          endpoint: "",
          accessKeyId: "",
          accessKeySecret: "",
          bucket: ""
        }
      }
    };
  }
};
</script>